
import { _decorator, Component, Node, Label, Sprite } from 'cc';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { LuckyWheelPanel } from './LuckyWheelPanel';
import { MergeASAP } from '../../../../scripts/libs/rxjs/cc3/Merge';
import { ProvideInfo } from '../../../../scripts/managers/SDK/IapSDKManager';
import { Subscription } from 'rxjs';
import { AnimationPlay } from '../../../../scripts/libs/rxjs/cc3/AnimationPlay';
import { Animation } from 'cc';
import { nullifySubscription } from '../../../../scripts/libs/rxjs/utils';
const { ccclass, property } = _decorator;

@ccclass('LuckyWheelItem')
export class LuckyWheelItem extends BaseView {

    data = ReactiveProperty.Create<{ idx: number, provide: ProvideInfo, p: number }>(null);

    choosed = ReactiveProperty.Create(false);

    panel: LuckyWheelPanel = null;

    @property(Node)
    rootNode: Node = null;

    @property(Sprite)
    iconSprite: Sprite = null;

    @property(Label)
    valueLabel: Label = null;

    useObserves() {
        return [
            this.data.subscribe(this.refresh.bind(this)),
            this.choosed.subscribe(this.choosedChanged.bind(this)),
            MergeASAP(this.panel.choosedIdx, this.data).subscribe(this.panelChoosedIdxChanged.bind(this)),
        ];
    }

    refresh() {
        if (this.data.value == null) return;

        for (let key in this.data.value.provide) {
            let value = this.data.value.provide[key];
            if (value > 0) {
                this.valueLabel.string = `${value}`;
                switch (key) {
                    case 'coin': {
                        if (value >= 500) {
                            this.iconSprite.spriteFrame = this.panel.coinSpriteFrames[2];
                        } else if (value >= 200) {
                            this.iconSprite.spriteFrame = this.panel.coinSpriteFrames[1];
                        } else {
                            this.iconSprite.spriteFrame = this.panel.coinSpriteFrames[0];
                        }
                        break;
                    }
                    case 'swapper':
                        this.iconSprite.spriteFrame = this.panel.itemSpriteFrames[0];
                        break;
                    case 'magnet':
                        this.iconSprite.spriteFrame = this.panel.itemSpriteFrames[1];
                        break;
                    case 'balloon':
                        this.iconSprite.spriteFrame = this.panel.itemSpriteFrames[2];
                        break;
                }
                break; // 只处理第一个，里面也只有1个
            }
        }

        if (this.data.value.provide.coin >= 0) {
            this.valueLabel.string = `${this.data.value.provide.coin}`;
        }

    }

    _sub_anim: Subscription = null;

    choosedChanged() {
        nullifySubscription.call(this, '_sub_anim');
        // if (this.choosed.value) {
        //     this._sub_anim = AnimationPlay(this.rootNode.getComponent(Animation), 'wheel_item_choosed').subscribe();
        // } else {
        //     this.rootNode.setScale(1, 1, 1);
        // }
    }

    panelChoosedIdxChanged() {
        if (this.data.value == null) {
            this.choosed.value = null;
            return;
        }
        this.choosed.value = this.data.value.idx == this.panel.choosedIdx.value;
    }

}

